// An highlighted block
<template>
	<view class="content">
<!-- 		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/WX20200627-161205.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class = "login_from">
			
				<view class="login_from_input">
					<view class="login_from_name">用户名</view>
					<view class="login_from_fun">
						<input class="input" type="text" v-model="name" placeholder="请输入用户名"/>
					</view>
				</view>
				
				<view class="login_from_input">
					<view class="login_from_name">密码</view>
					<view class="login_from_fun">
						<input type="digit" v-model="password" password="true" placeholder="请输入登录密码">
					</view>
				</view>
				
				<view class="login_from_dl">
					<button class="btnValue" @click="login">登录</button>
				</view>
				
				<view class="forgotBtn">
					<navigator url = "/pages/register/register">注册账号</navigator>
					<text>|</text>
					<navigator url="/pages/reset/reset">重置密码</navigator>
				</view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提示信息" :content="messageText"></uni-popup-dialog>
				</uni-popup>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name : "",
				password: "",
				msgType:"",
				messageText:""
			}
		},

		methods: {
			login(){
			        //账号
				    let name = this.name;
				    //密码
				    let password = this.password;
			        //写完上面定义后就打印一下
			        console.log(name);
					uni.request({
						url: "http://localhost:8080/user/login", //请求后端的接口地址,我这个仅供参考
						method: 'POST', //这个是后端你请求的方式，是什么请求就使用什么请求方式，且必须大写
						data: {
							name:	 this.$encryptByPublicKey(this.name),//这里是你要传递到后端的用户名，前面那个name要与后端参数名一样
							password:this.$encryptByPublicKey(this.password) //这个是要传递的密码，同样，pass也要跟后端参数名一样
						},
						header: {
							'Content-Type':'application/x-www-form-urlencoded' //请求头信息
						},
						success: (res) => { //如果访问接口成功就会进入success
							if(res.data.message!=null){
								this.msgType = "error";
								this.messageText = res.data.message;
								this.$refs.alertDialog.open()
							}
							else{
								uni.setStorageSync("token",res.data);
							}
							
						},
						fail:()=>{ //如果访问接口失败就会进入fail	
						}
					})
			}
		}
	}
</script>

<style>
	page{ background: #fff; }
	.login_from{
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	.login_from_name{ width: 20%; }
	.avatorWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
/* 	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 400px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	} */
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
			margin-top: 2vh;
			display: flex;
			justify-content: center;
 
			::v-deep text {
				margin: 0 2vw;
			}
	}
	.login_from_input{ 
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	}
	.login_from_fun{ 
		width: 80%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	.login_from_dl{
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		margin-top: 150upx;   
	}
	.login_from_dl button{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		background: #77B307; 
		color: #fff; 
		border-radius: 0px; 
	}
</style>